<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <title>医生管理</title>
    <link href="bootstrap-4.6.1-dist/css/bootstrap.min.css"
          rel="stylesheet"
          type="text/css">
    <style type="text/css">
        #main{
            background-color: #ececf6;
            box-sizing:border-box;
        }
        #center{
            background-color: #e9ecef;
        }
        #selectallplace{
            margin-left: 30px;
            margin-right: -20px;
            margin-bottom: 30px;
        }
        #addplace{
            margin-right: 10px;
        }
        #searchplace{
            margin-left: 650px;
            margin-right: 10px;
        }
        #top{
            margin-top: -20px;
            padding-top: 50px;
            padding-bottom: 10px;
        }
    </style>
</head>

<body>
<!-- 页面内容 -->
<div id="main">
    <!-- 查询框 -->
    <nav class="navbar navbar-expand-lg navbar-light" style="background-color: #e3f2fd;">
        <a class="navbar-brand" href="#">菜单</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav"
                aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="Doctor.html">医生管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="medicine.html">药品管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Register.html">挂号管理</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link justify-content-end" href="login.html">退出</a>
                </li>
            </ul>
        </div>
    </nav>
    <div id="top">
        <form id="searchform">
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">编号：</label>
                <div class="col-8">
                    <input type="text" name="Number" class="form-control" placeholder="非必填">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">医生姓名：</label>
                <div class="col-8">
                    <input type="text" name="Name" class="form-control" placeholder="非必填">
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">性别：</label>
                <div class="col-8">
                    <select name="Sex" class="form-control">
                        <option value="-1">查询所有</option>
                        <option value="0">男</option>
                        <option value="1">女</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">科室：</label>
                <div class="col-8">
                    <select name="Department" class="form-control">
<!--                    1. value汉字，head头 2. 查所有，传''-->
                        <option value="">查询所有</option>
                        <option value="a科">a科</option>
                        <option value="b科">b科</option>
                        <option value="c科">c科</option>
                        <option value="d科">d科</option>
                        <option value="e科">e科</option>
                        <option value="f科">f科</option>
                        <option value="g科">g科</option>
                        <option value="h科">h科</option>
                    </select>
                </div>
            </div>
            <div class="form-group row">
                <label class="col-form-label col-2 text-center">状态：</label>
                <div class="col-8">
                    <select name="State" class="form-control">
                        <option value="-1">查询所有</option>
                        <option value="0">离职</option>
                        <option value="1">在职</option>
                    </select>
                </div>
            </div>
            <!-- 确认按钮 -->
            <div class="form-group row">
                <div id="searchplace">
                    <button type="button" id="btnSearch" class="btn btn-success">确认</button>
                </div>
                <div>
                    <button type="reset" id="btnReset" class="btn btn-secondary">重置</button>
                </div>
            </div>
        </form>
    </div>
    <!-- 结果显示  -->
    <div id="center">
        <form id="alldeleteform">
            <table class="table table-bordered table-hover table-striped table-light">
                <thead>
                <tr class="text-center">
                    <td>编号</td>
                    <td>姓名</td>
                    <td>性别</td>
                    <td>科室</td>
                    <td>状态</td>
                    <td>联系方式</td>
                    <td>操作</td>
                </tr>
                </thead>
                <tbody id="tbody">
                <!--  未开始查询  -->
                <tr>
                    <td colspan="7" class="text-center">没有数据</td>
                </tr>
                </tbody>
            </table>
        </form>
    </div>
    <!-- 添加/批量 -->
    <div id="last">
        <div class="form-group row">
            <div class="col-1" id="selectallplace">
                <input type="checkbox" onclick="selectAll(this.checked)">全选
            </div>
            <div id="addplace">
                <a class="btn btn-success" href="Doctor_add.html" role="button">添加新医生</a>
<!--                    <button type="button" id="btnAdd" class="btn btn-success">添加新医生</button>-->
            </div>
            <div id="alldeleteplace">
                <button type="button" id="btnAllDelete" class="btn btn-secondary" onclick="doAllDelete()">批量删除</button>
            </div>
        </div>
    </div>
</div>
<!-- 模态框editform -->
<div class="modal fade" id="editModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">编辑</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- 内容 -->
            <div class="modal-body">
                <form id="editform">
<!--                    <div class="form-group row">-->
<!--                        <label class="col-form-label col-2 text-center">编号：</label>-->
<!--                        <div class="col-8">-->
<!--                            <input type="text" id="editNumber" name="Number" class="form-control"-->
<!--                                   placeholder="用户真实姓名">-->
<!--                        </div>-->
<!--                    </div>-->
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">姓名：</label>
                        <div class="col-8">
                            <input type="text" id="editName" name="Name" class="form-control">
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">性别：</label>
                        <div class="col-8">
                            <select name="Sex" id="editSex" class="form-control">
                                <option value="0">男</option>
                                <option value="1">女</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">科室：</label>
                        <div class="col-8">
                            <select name="Department" class="form-control">
                                <option value="a科">a科</option>
                                <option value="b科">b科</option>
                                <option value="c科">c科</option>
                                <option value="d科">d科</option>
                                <option value="e科">e科</option>
                                <option value="f科">f科</option>
                                <option value="g科">g科</option>
                                <option value="h科">h科</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">状态：</label>
                        <div class="col-8">
                            <select name="State" id="editState" class="form-control">
                                <option value="0">已离职</option>
                                <option value="1">在职</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label class="col-form-label col-2 text-center">电话：</label>
                        <div class="col-8">
                            <input type="text" id="editPhone" name="Phone" class="form-control">
                        </div>
                    </div>
                    <!-- 存放要修改数据的主键值，作为条件使用 -->
                    <input type="hidden" name="Number" id="editNumber">
                </form>
            </div>
            <!-- 确认按钮 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doEdit()">保存</button>
            </div>
        </div>
    </div>
</div>
<!-- 模态框deleteform -->
<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel2">提示</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <!-- 内容 -->
            <div class="modal-body">
                您确定要删除【<span id="deleteName"></span>】吗?
                <form id="deleteform">
                    <input type="hidden" name="ids" id="deleteNumber">
                </form>
            </div>
            <!-- 确认按钮 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" onclick="doDelete()">删除</button>
            </div>
        </div>
    </div>
</div>

</body>

<script src="jQuery/jquery-3.6.0.min.js"></script>
<script src="bootstrap-4.6.1-dist/js/bootstrap.min.js"></script>

<script>
// 查询：提取form1内容，提交服务器查询，放入结果显示
    function theSearch() {
        let form=jQuery("#searchform").serialize();
        jQuery.post("user/doctor_search",form,function(post_return)
        {
            let result='';
            // 有查询结果，数组
            for(let i=0;i<post_return.length;i++)
            {
                let u=post_return[i];
                result+=` <tr>
                            <td>
                                <input type="checkbox" name="ids" value="${u.Number}">${u.Number}
                            </td>
                            <td>${u.Name}</td>
                            <td>${u.Sex==0?'男':'女'}</td>
                            <td>${u.Department}</td>
                            <td>${u.State==0?'离职':'在职'}</td>
                            <td>${(u.Phone==null)||(u.Phone=='')?'未登入':u.Phone}</td>
                            <td>
                                <a href="#" onclick='showDelete(${JSON.stringify(u)})'>删除</a>
                                <a href="#" onclick='showEdit(${JSON.stringify(u)})'>编辑</a>
                            </td>
                          </tr>`;
            }
            // 无查询结果
            if(result.length==0)
            {
                result=`<tr>
                            <td colspan="7" class="text-center">没有数据</td>
                        </tr>`;
            }
            // 放入
            jQuery("#tbody").html(result);
        })
    }
// 提交服务器：点击--整合，发
    jQuery(function () {
        // 设置btnSearch
        jQuery("#btnSearch").click(function () {
            theSearch();    // 提取form1内容，查询，放入结果显示框
        });
    })
</script>

<!-- edit -->
<script>
//  "编辑"：       u->#，显示
// "编辑"里"确认"： 提交服务器：整合 发送

    function showEdit(u) {
        jQuery("#editNumber").val(u.Number);
        jQuery("#editName").val(u.Name);
        jQuery("#editSex").val(u.Sex);
        jQuery("#editDepartment").val(u.Department);
        jQuery("#editState").val(u.State);
        jQuery("#editPhone").val(u.Phone);
        // 展示到editModal
        jQuery("#editModal").modal("show");
    }

    function doEdit() {
        // #editModal修改完后，再把#editform提取出来交给服务器
        let form=jQuery("#editform").serialize();
        jQuery.post("user/doctor_edit",form,function(post_return){
            if(post_return>0)
            {
                jQuery("#editModal").modal("hide"); // 模态框隐藏
                alert("修改成功");
                theSearch();    // 更新：重新查询
            }else{
                alert("修改失败");
            }
        });
    }

</script>

<!-- delete -->
<script>
//  "删除"：       u->#，显示
// "删除"里"提交"： 提交服务器：整合 发送

    function showDelete(u) {
        // u->#，显示。除了表单其他都用html
        jQuery("#deleteName").html(u.Name);
        jQuery("#deleteNumber").val(u.Number);
        jQuery("#deleteModal").modal("show");
    }

    function doDelete() {
        let form=jQuery("#deleteform").serialize();
        jQuery.post("user/doctor_delete",form,function (post_return) {
            if(post_return>0)
            {
                alert("删除成功！");
                theSearch();
            }else{
                alert("删除失败！");
            }
        });
        jQuery("#deleteModal").modal("hide");
    }

</script>

<!-- alldelete -->
<script>
    // 全选
    function selectAll(f) {
        jQuery("input[name='ids']").prop("checked",f);
    }
    // delete映射写的是多值，删1/n个都可
    function doAllDelete() {
        let form=jQuery("#alldeleteform").serialize();
        jQuery.post("user/doctor_delete",form,function (post_return) {
            if(post_return>0)
            {
                alert("删除成功！");
                theSearch();
            }else{
                alert("删除失败！");
            }
        });
    }

</script>

</html>